<template>
    <div>
        <!--首页——轮播图-->
        <Carousel />
        <!--首页——医院搜索组件-->
        <Search />
        <!--首页——医院列表组件-->
        <el-row :gutter="20">
            <el-col :span="20">
                <!--首页——等级筛选组件-->
                <Level @getHosType="getHosType" />
                <!--首页——地区筛选组件-->
                <Region @getDistrictCode="getDistrictCode" />
                <!--首页——医院信息卡片组件-->
                <div class="info" v-if="hostpitalTotal != 0">
                    <Card class="item" v-for="(item) in hostpitalInfoArr" :key="item.id" :hospitalInfo="item" />
                </div>
                <el-empty v-else description="暂无该地区医院数据" image="src/assets/images/cry.png" />
                <!--首页——分页器-->
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                    :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="hostpitalTotal"
                    @current-change="currentChange" @size-change="sizeChange" />
            </el-col>
            <el-col :span="4">
                <Tip />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
//引入首页轮播图、医院搜索、等级筛选、地区筛选、信息卡片、右侧静态信息栏组件
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Region from './region/index.vue'
import Card from './card/index.vue'
import Tip from './tip/index.vue'
//引入医院数据请求的API
import { reqHospital } from '@/api/home'
import { ref, onMounted } from 'vue'
import { HospitalResponseData } from '@/api/home/type'

// 分页器需要的数据

// 分页器页码
const pageNo = ref<number>(1)
// 一页展示数据条数
const pageSize = ref<number>(10)
// 展示的医院信息数据
const hostpitalInfoArr = ref<any[]>([])
// 医院的总数，用于分页器
const hostpitalTotal = ref<number>(0)
// 当前医院等级的筛选值
const hosType = ref<string>('')
// 当前医院地区的筛选值
const districtCode = ref<string>('')
// 组件挂载完毕后，预先请求第一页的医院数据
onMounted(() => {
    getHospitalInfo()
})

const getHospitalInfo = async () => {
    // 获取医院信息：默认获取第一页、十个医院的信息
    const result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hosType.value, districtCode.value)
    if (result.code === 200) {
        // 存信息
        hostpitalInfoArr.value = result.data.content
        // 存医院总数
        hostpitalTotal.value = result.data.totalElements
    }
}

// 分页器页码发生变化时触发的事件
const currentChange = () => {
    getHospitalInfo();
}
//分页器每页显示个数发生变化时触发的事件
const sizeChange = () => {
    //当前页码归第一页
    pageNo.value = 1;
    //再次发请求获取医院的数据
    getHospitalInfo();
};

// 子组件自定义事件，将子组件中的响应式数据传给父组件
// 此处为Level子组件传回等级筛选值
const getHosType = (value: string) => {
    hosType.value = value
    getHospitalInfo();
}

// 子组件自定义事件，将子组件中的响应式数据传给父组件
// 此处为Region子组件传回等级筛选值
const getDistrictCode = (value: string) => {
    districtCode.value = value
    getHospitalInfo();
}
</script>

<style lang="scss" scoped>
.info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    :hover {
        cursor: pointer;
    }

    .item {
        width: 48%;
        margin: 10px 0;
    }
}
</style>